<#-- @ftlvariable name="entity" type="com.xci.edu.core.entity.ExamPaper" -->
<#include "/sys/_layout.ftl">
<#assign allowSetPlan=sysWeb.auth("background.eduPlan.setPlan")/>
<!doctype html>
<html>
<head>
    <@pageHeader/>
</head>
<body>
<@pageLoading/>
<div id="gridtoolbar">
    <form id="gridform" class="jxlayout-form form-inline jxform">
        <div class="form-group">
            <input type="hidden" id="eduCategoryId" name="eduCategoryId" placeholder="科目Id" autocomplete="off" value="${eduCategoryId}">
            <input type="hidden" id="eduPlanId" name="eduPlanId" placeholder="计划Id（用于预约）" autocomplete="off" value="${eduPlanId}">
            <input type="hidden" id="eduPlanName" name="eduPlanName" placeholder="计划Name（用于预约）" autocomplete="off" value="${eduPlanName}">
            <input type="hidden" id="status" name="status" placeholder="状态" autocomplete="off" value="1">
            <input type="hidden" id="planId" name="planId" placeholder="计划Id（用于table过滤）" autocomplete="off" value="">
        </div>
        <div class="form-group">
            <input name="name" class="form-control w-250px" placeholder="请输入姓名\简拼" autocomplete="off">
        </div>
        <button class="btn btn-primary ml-5" type="submit">
            <i class="fa fa-search"></i> 查询
        </button>
        <div class="btn-group">
            <@echo test=allowSetPlan>
                <a class="btn btn-default" onclick="setPlan()">
                    <i class="icon-plus"></i> 批量预约报名
                </a>
            </@echo>
        </div>
    </form>
    <div class="jxtabs-line line-primary border-top-gray" style="margin-bottom: 2px;">
        <ul class="nav nav-tabs">
            <li class="active" data-value="">
                <a data-toggle="tab">未报名</a>
            </li>
            <li data-value="${eduPlanId}">
                <a data-toggle="tab">已报名</a>
            </li>
        </ul>
    </div>
</div>
<table id="grid" data-options="form:'#gridform',toolbar:'#gridtoolbar'">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="title:'学员姓名',field:'name',width:80,align:'left',sortable: false"></th>
        <th data-options="title:'简拼',field:'spell',width:80,align:'left',sortable: false"></th>
        <th data-options="title:'身份证号码',field:'idNumber',width:180,align:'left',sortable: false"></th>
        <th data-options="title:'手机号码',field:'phone',width:120,align:'left',sortable: false"></th>
        <th data-options="title:'地址',field:'address',width:200,align:'left',sortable: false"></th>
        <th data-options="title:'邮箱',field:'email',width:150,align:'left',sortable: false"></th>
        <th data-options="title:'状态',field:'status',width:70,align:'left',sortable: false,formatter:formatStatus"></th>
        <th data-options="title:'操作',field:'id',width:50,align:'left',formatter: formatCommand"></th>
    </tr>
    </thead>
</table>
<@pageFooter/>
<script type="text/html" id="cmd_tpl">
    <div style="margin: 0 5px">
        <a class="cmd-edit" data-id="{0}"><span class="label label-info">预约</span></a>
    </div>
</script>
<script>
    function formatStatus(v, row, index) {
        if (v == '0') {
            return '<span class="label label-warning">预报名</span>';
        }if (v == '1') {
            return '<span class="label label-info">报名中</span>';
        }if (v == '2') {
            return '<span class="label label-success">学习中</span>';
        }if (v == '3') {
            return '<span class="label label-default">准备考试</span>';
        }if (v == '4') {
            return '<span class="label label-danger">考试中</span>';
        } if (v == '5') {
            return '<span class="label label-primary">完成</span>';
        } else {
            return '<span class="label label-primary"></span>';
        }
    }
    function formatCommand(v) {
        var status =$("#status").val();
        if(status == 1){
            //未报名
            return jx.formatString($('#cmd_tpl').html(), v);
        }else{
            //已报名
            return ;
        }

    }
    jx.ready(function () {
        window.curd = new jx.GridCurd('#grid', {
            title: '学员',
            dialogWidth: '800px',
            dialogHeight: '600px',
            api: {
                grid: '/background/eduStudent/grid',
                setPlanUpdate:'/background/eduPlan/setPlanUpdate'
            },
            getGridOptions: function () {
                return {
                    queryParams: {
                        eduCategoryId: '${eduCategoryId}',
                        status:$("#status").val()
                    }
                }
            },
            onInit: function (instance) {
                $('.nav-tabs > li').on('click', function () {
                    if($(this).data('value') == "" || $(this).data('value') == null || $(this).data('value') == undefined){ // "",null,undefined
                        //未报名
                        $('#status').val(1);
                        $('#planId').val("");
                    }else{
                        //已报名
                        $('#status').val("");
                        $('#planId').val($(this).data('value'));
                    }
                    $('#gridform').find(':submit').click();
                });
                //预约
                instance.gridPanel.on('click', '.cmd-edit', function () {
                    var row = curd.gridInstance.getSelected();
                    var id = row.id;
                    var planId = $("#eduPlanId").val();
                    var planName = $("#eduPlanName").val();
                    jx.ajax({
                        url: jx.url(curd.api.setPlanUpdate),
                        data: {
                            ids: id,
                            planId:planId,
                            planName:planName
                        },
                        maskMsg: '正在预约,请稍等...',
                        success: function (result) {
                            this.reloadGridData();
                            jx.toastr.success('预约成功');
                        }
                    });
                });
            }
        });
    });

    /**
     * 批量预约
     */
    function setPlan() {
        if (!curd.gridInstance.hasCheckedRow()) return;
        var ids = curd.gridInstance.getCheckedRowIds();
        var planId = $("#eduPlanId").val();
        var planName = $("#eduPlanName").val();
        console.log(ids.join(),planId,planName)
        jx.ajax({
            url: jx.url(curd.api.setPlanUpdate),
            data: {
                ids: ids.join(),
                planId:planId,
                planName:planName
            },
            maskMsg: '正在预约,请稍等...',
            success: function (result) {
                this.reloadGridData();
                jx.toastr.success('预约成功');
            }
        });
    };

</script>
</body>
</html>
